<template>
    <el-row class="list">
        <el-row class="item" type="flex" v-for="(item,index) in list" :key="item.title">
            <el-col class="left">
                <template v-if="index%2===0">
                    <p class="title">
                        <img src="@/assets/img/products/red_a@2x.png" alt="tag">
                        {{item.title}}
                    </p>
                    <p class="content">{{item.content}}</p>
                </template>
                <img
                    v-else 
                    :src="require(`@/assets/img/products/p${index+1}@2x.png`)"
                    class="halfimg"
                    alt="half">
            </el-col>
            <el-col class="right">
                <template v-if="index%2!==0">
                    <p class="title">
                        <img src="@/assets/img/products/red_a@2x.png" alt="tag">
                        {{item.title}}
                    </p>
                    <p class="content">{{item.content}}</p>
                </template>
                <img
                    v-else 
                    :src="require(`@/assets/img/products/p${index+1}@2x.png`)"
                    class="halfimg"
                    alt="half">
            </el-col>
        </el-row>
    </el-row>
</template>

<script>
    export default {
        computed:{
            list(){
                return this.$t("products.municipalList")
            }
        }
    }
</script>

<style lang="less" scoped>
.item {
    display: flex;
    align-items: center;
    padding-bottom: 50px;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 50px;
    .left,.right{
        flex: 1;
        text-align: left;
        .title {
            font-size:20px;
            font-weight:bold;
            color:rgba(51,51,51,1);
            line-height: 1;
            margin-bottom: 10px;
            img {
                width: 21.7px;
                height: 21.7px;
                vertical-align: middle;
            }
        }
        .content {
            width: 539px;
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:28px;
        }
        .halfimg {
            width: 600px;
            height: 200px;
        }
    }
}
</style>